<template>
  <view class="container">
    <!-- Background image -->
    <image class="background-image" :src="figures[currentIndex].avatar" mode="aspectFill"></image>
    <view class="overlay"></view>

    <!-- Header -->
    <view class="header">
      <!-- <text class="title">时空对话</text> -->
      <text class="subtitle">穿越古今，与莒县历史名人进行对话</text>
    </view>

    <!-- Figure Carousel -->
    <view class="carousel">
      <!-- Navigation arrows -->
      <view class="nav-arrow left" @click="prevFigure">
        <text class="arrow-icon">〈</text>
      </view>

      <!-- Figure content -->
      <view class="figure-content">
        <image class="figure-avatar" :src="figures[currentIndex].avatar" mode="aspectFill"></image>
        <view class="figure-info">
          <view class="name-title">
            <text class="figure-name">{{ figures[currentIndex].name }}</text>
            <text class="figure-title">{{ figures[currentIndex].title }}</text>
          </view>
          <text class="figure-description">{{ figures[currentIndex].description }}</text>
        </view>

        <!-- Start conversation button -->
        <button class="start-button" @click="startConversation(figures[currentIndex])">
          开始时空对话
        </button>

        <!-- Page indicator -->
        <view class="page-indicator">
          <view v-for="(_, index) in figures" :key="index"
            :class="['indicator-dot', index === currentIndex ? 'active' : '']" @click="currentIndex = index"></view>
        </view>
      </view>

      <!-- Navigation arrows -->
      <view class="nav-arrow right" @click="nextFigure">
        <text class="arrow-icon">〉</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// State
const currentIndex = ref(0);

// Data
const figures = ref([
  {
    id: 1,
    name: '管仲',
    title: '春秋时期政治家',
    avatar: '/static/shikong/guanzhong.jpg',
    description: '春秋时期齐国宰相，莒县人，辅佐齐桓公成为五霸之首。他制定了著名的"弱干强枝"策略，推行"轻关易道"政策，使齐国成为当时最强大的诸侯国之一。',
    prompt: '我是管仲（约公元前723年-公元前645年），字夷吾，莒县人，春秋时期著名的政治家和思想家。我辅佐齐桓公成为春秋五霸之首，实施"尊王攘夷"政策，推行"轻关易道"的经济政策，壮大齐国国力。我的政治思想被后人整理为《管子》一书，对后世产生了深远影响。我强调法治和经济在治国中的重要性，认为"仓廪实而知礼节，衣食足而知荣辱"。我深信合理的制度是国家繁荣的基础，而非单纯依靠君主个人的贤明。如今穿越时空与你对话，请问有何见教？'
  },
  {
    id: 2,
    name: '刘勰',
    title: '南北朝文学批评家',
    avatar: '/static/shikong/liuxie.jpg',
    description: '南北朝时期文学理论家，著有《文心雕龙》，被誉为中国古代文学理论的集大成者，对后世文学理论与创作有深远影响。',
    prompt: '我是刘勰（约公元465年-约公元521年），南北朝时期杰出的文学理论家、评论家。我著有《文心雕龙》，这是中国古代最重要的文学理论著作之一，被誉为"文学之经"。我在书中系统地阐述了中国古代文学的起源、发展、体裁、风格、创作方法等理论问题，体现了深刻的文学见解和美学思想。我的理论对中国古代文学创作产生了深远影响，被后人尊为文学理论的开拓者和集大成者。今日有幸与你交流，愿与你探讨文学艺术的奥妙与真谛。'
  },
  {
    id: 3,
    name: '左思',
    title: '晋代文学家、诗人',
    avatar: '/static/shikong/zuosi.jpg',
    description: '西晋著名文学家、诗人，莒县人，创作了《三都赋》等脍炙人口的作品，影响深远，被誉为"才高八斗"，"洛阳纸贵"典故即源于他的作品。',
    prompt: '我是左思（约公元250年-约公元305年），字太冲，莒县人，西晋著名文学家、诗人。我创作了《三都赋》，描绘魏、蜀、吴三国都城的繁华景象，被誉为"才高八斗"。我著述《咏史》等诗篇，以史为鉴，讽喻现实。我耗时十年完成《三都赋》，"洛阳纸贵"的典故即源于此。我品性高洁，不慕荣利，曾以"肉食者鄙，未能远谋"讽刺当权贵族。我的作品辞藻华丽而不失内涵，被后世推崇为"太冲体"。现在穿越时空，愿与你谈文论道。'
  },
  {
    id: 4,
    name: '姜亮',
    title: '明代诗人、书法家',
    avatar: '/static/shikong/jiangliang.jpg',
    description: '明代著名诗人、书法家，莒县人，擅长山水诗词，行书、楷书功底深厚，著有《姜氏集》，风格清新自然，意境高远。',
    prompt: '我是姜亮（1524年-1591年），字明仲，号晴峰，莒县人，明代中期著名的诗人、书法家。我擅长创作山水诗词，风格清新自然，意境高远。我的书法功底深厚，尤擅行书与楷书，笔法苍劲有力，风格独特。我一生创作颇丰，著有《姜氏集》，内容包括诗词、书论及日常笔记等。我生活于明朝中后期，亲历了社会变革与思想交融的时代，作品中既有对自然山水的赞美，也有对社会现实的思考。今日有幸穿越时空与您对话，愿分享我对文学艺术的见解。'
  }
]);

// Methods
function prevFigure() {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  } else {
    currentIndex.value = figures.value.length - 1;
  }
}

function nextFigure() {
  if (currentIndex.value < figures.value.length - 1) {
    currentIndex.value++;
  } else {
    currentIndex.value = 0;
  }
}

function startConversation(figure) {
  uni.navigateTo({
    url: `/pages/shikong/chat?id=${figure.id}`
  });
}
</script>

<style>
.container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.header {
  position: relative;
  z-index: 2;
  padding: 40px 20px 20px;
  text-align: center;
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.carousel {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

.nav-arrow {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.arrow-icon {
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
}

.figure-content {
  flex: 1;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 20px;
  margin: 0 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.figure-avatar {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  border: 4px solid #e9d8bc;
  margin-top: -60px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.figure-info {
  width: 100%;
  margin-top: 15px;
}

.name-title {
  text-align: center;
  margin-bottom: 15px;
}

.figure-name {
  font-size: 24px;
  font-weight: bold;
  color: #3a2c1d;
  display: block;
}

.figure-title {
  font-size: 16px;
  color: #7d6e5d;
  margin-top: 5px;
  display: block;
}

.figure-description {
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.6;
  text-align: justify;
  padding: 0 10px;
  margin-bottom: 25px;
}

.start-button {
  background-color: #8b6b4a;
  color: white;
  font-size: 16px;
  padding: 12px 30px;
  border-radius: 25px;
  border: none;
  margin: 10px 0 20px;
  box-shadow: 0 4px 15px rgba(139, 107, 74, 0.3);
  transition: all 0.3s ease;
}

.start-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(139, 107, 74, 0.3);
}

.page-indicator {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #d9d9d9;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  width: 20px;
  background-color: #8b6b4a;
}
</style>
